<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
        <meta name="format-detection" content="telephone=no" />
        <title>新的朋友</title>
        <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
        <link rel="stylesheet" type="text/css"  href="../../css/mui.min.css">
        <link rel="stylesheet" type="text/css" href="../../css/common.css" />
        <style>
            body{
                font-size: 14px;
            }
            footer.aui-nav{
                z-index: 99999;
            }
            header.aui-bar{
                background: #fff;
                position: fixed;
            }
            .contain{
                padding-top:  45px;
                padding-bottom: 15px;
            }
            .aui-title{
                color:#000;
            }
            .aui-nav .aui-bar-tab .active .aui-iconfont, .aui-nav .aui-bar-tab .active p{
                color:#327afa !important;
            }
            .active{
                color:#327afa !important;
            }
            .aui-tab-nav li.active {
                color: #327afa;
                border-bottom: 2px #327afa solid;
            }
            .aui-bar .aui-iconfont{
                color:#000;
            }
            .send{
                font-size: 12px !important;
            }
            .aui-img-object{
                max-width: 40px;
                height: 40px;
                line-height: 40px;
                margin-right: 10px;
            }
            .aui-img-body{
                width: 62%;
                float: left;
            }
            .addInfo{
                font-size: 12px;
            }
            .status{
                /*height: 40px;
                line-height: 40px;*/
            }
            .aui-ellipsis-1{
                padding: 0;
            }
            .mui-btn-red{
                background: #ff3333;
            }
            .spanStatus{
                display: block;
                border-radius: 4px;
                padding:4px;
                height: 20px;
                line-height: 20px;
                box-sizing:content-box;
                margin-top: 8px;
            }
            .receive{
                background: #327afa;
                color:#fff;

            }
            .mui-table-view-cell:after,.mui-table-view:before,.mui-table-view:after{
                height: inherit;
                background-color:transparent;
                left: 0;
            }
            .mui-table-view-cell:after{
                bottom: -100%;
            }
            .mui-table-view-cell:last-child:after, .mui-table-view-cell:last-child:before{
                height: inherit;
            }

            .pickerToTop{
                position: absolute;
                bottom: 0;
                /*-webkit-transform: translateY(100%);*/
                /*height:50%;*/
                /*overflow-y:auto; */
                /*-webkit-transition:  .5s;
                transition:  .5s;*/
                z-index: 999;
                width: 100%;
                display: none;
            }
            .toTopAnimate{
                display: block;
            }
            footer{
                display: none;
            }
            .searchResult{
                display: none;
            }
        </style>
    </head>
    <body>
        <header class="aui-bar aui-bar-nav aui-border-b">
            <div class="aui-pull-left aui-iconfont aui-icon-left icon-left-coler" tapmode onclick="closeWin()"></div>
            <div class="aui-title">
                新的朋友
            </div>
            <div class="aui-pull-right aui-iconfont send" tapmode onclick="showPicker()">添加朋友</div>
        </header>

        <div class="contain">
            <ul class=" mui-table-view friendList">
                <li class="mui-table-view-cell mui-media aui-border-b">
                        <div class="mui-slider-right mui-disabled">
                            <a class="mui-btn mui-btn-red">删除</a>
                        </div>
                    <div class="mui-slider-handle">
                        <img class="aui-img-object aui-pull-left" src="../../image/shili.jpg">
                        <div class="aui-img-body">
                            <div class="comName aui-ellipsis-1">图文列表文字介绍内容可以为一行也可以</div>
                            <p class="aui-ellipsis-1 addInfo">图文列表缩略图在左边的样式，默认大小为80PX，文字介绍内容可以为一行也可以为两行，超出部分自动省略</p>
                        </div>
                        <div class="status aui-pull-right"><span class="spanStatus ">已添加</span></div>
                    </div>
                </li>
                <li class="mui-table-view-cell mui-media aui-border-b">
                        <div class="mui-slider-right mui-disabled">
                            <a class="mui-btn mui-btn-red">删除</a>
                        </div>
                    <div class="mui-slider-handle">
                        <img class="aui-img-object aui-pull-left" src="../../image/shili.jpg">
                        <div class="aui-img-body">
                            <div class="comName aui-ellipsis-1">图文列表文字介绍内容可以为一行也可以</div>
                            <p class="aui-ellipsis-1 addInfo">图文列表缩略图在左边的样式，默认大小为80PX，文字介绍内容可以为一行也可以为两行，超出部分自动省略</p>
                        </div>
                        <div class="status aui-pull-right"><span class="spanStatus receive" onclick="receive(this)">接受</span></div>
                    </div>
                </li>
                <li class="mui-table-view-cell mui-media aui-border-b">
                        <div class="mui-slider-right mui-disabled">
                            <a class="mui-btn mui-btn-red">删除</a>
                        </div>
                    <div class="mui-slider-handle">
                        <img class="aui-img-object aui-pull-left" src="../../image/shili.jpg">
                        <div class="aui-img-body">
                            <div class="comName aui-ellipsis-1">图文列表文字介绍内容可以为一行也可以</div>
                            <p class="aui-ellipsis-1 addInfo">图文列表缩略图在左边的样式，默认大小为80PX，文字介绍内容可以为一行也可以为两行，超出部分自动省略</p>
                        </div>
                        <div class="status aui-pull-right"><span class="spanStatus receive" onclick="receive(this)">接受</span></div>
                    </div>
                </li>
                <li class="mui-table-view-cell mui-media aui-border-b">
                        <div class="mui-slider-right mui-disabled">
                            <a class="mui-btn mui-btn-red">删除</a>
                        </div>
                    <div class="mui-slider-handle">
                        <img class="aui-img-object aui-pull-left" src="../../image/shili.jpg">
                        <div class="aui-img-body">
                            <div class="comName aui-ellipsis-1">图文列表文字介绍内容可以为一行也可以</div>
                            <p class="aui-ellipsis-1 addInfo">图文列表缩略图在左边的样式，默认大小为80PX，文字介绍内容可以为一行也可以为两行，超出部分自动省略</p>
                        </div>
                        <div class="status aui-pull-right"><span class="spanStatus receive" onclick="receive(this)">接受</span></div>
                    </div>
                </li>
                <li class="mui-table-view-cell mui-media aui-border-b">
                        <div class="mui-slider-right mui-disabled">
                            <a class="mui-btn mui-btn-red">删除</a>
                        </div>
                    <div class="mui-slider-handle">
                        <img class="aui-img-object aui-pull-left" src="../../image/shili.jpg">
                        <div class="aui-img-body">
                            <div class="comName aui-ellipsis-1">图文列表文字介绍内容可以为一行也可以</div>
                            <p class="aui-ellipsis-1 addInfo">图文列表缩略图在左边的样式，默认大小为80PX，文字介绍内容可以为一行也可以为两行，超出部分自动省略</p>
                        </div>
                        <div class="status aui-pull-right"><span class="spanStatus receive" onclick="receive(this)">接受</span></div>
                    </div>
                </li>
                <li class="mui-table-view-cell mui-media aui-border-b">
                        <div class="mui-slider-right mui-disabled">
                            <a class="mui-btn mui-btn-red">删除</a>
                        </div>
                    <div class="mui-slider-handle">
                        <img class="aui-img-object aui-pull-left" src="../../image/shili.jpg">
                        <div class="aui-img-body">
                            <div class="comName aui-ellipsis-1">图文列表文字介绍内容可以为一行也可以</div>
                            <p class="aui-ellipsis-1 addInfo">图文列表缩略图在左边的样式，默认大小为80PX，文字介绍内容可以为一行也可以为两行，超出部分自动省略</p>
                        </div>
                        <div class="status aui-pull-right"><span class="spanStatus receive" onclick="receive(this)">接受</span></div>
                    </div>
                </li>
                <li class="mui-table-view-cell mui-media aui-border-b">
                        <div class="mui-slider-right mui-disabled">
                            <a class="mui-btn mui-btn-red">删除</a>
                        </div>
                    <div class="mui-slider-handle">
                        <img class="aui-img-object aui-pull-left" src="../../image/shili.jpg">
                        <div class="aui-img-body">
                            <div class="comName aui-ellipsis-1">图文列表文字介绍内容可以为一行也可以</div>
                            <p class="aui-ellipsis-1 addInfo">图文列表缩略图在左边的样式，默认大小为80PX，文字介绍内容可以为一行也可以为两行，超出部分自动省略</p>
                        </div>
                        <div class="status aui-pull-right"><span class="spanStatus receive" onclick="receive(this)">接受</span></div>
                    </div>
                </li>
                <li class="mui-table-view-cell mui-media aui-border-b">
                        <div class="mui-slider-right mui-disabled">
                            <a class="mui-btn mui-btn-red">删除</a>
                        </div>
                    <div class="mui-slider-handle">
                        <img class="aui-img-object aui-pull-left" src="../../image/shili.jpg">
                        <div class="aui-img-body">
                            <div class="comName aui-ellipsis-1">图文列表文字介绍内容可以为一行也可以</div>
                            <p class="aui-ellipsis-1 addInfo">图文列表缩略图在左边的样式，默认大小为80PX，文字介绍内容可以为一行也可以为两行，超出部分自动省略</p>
                        </div>
                        <div class="status aui-pull-right"><span class="spanStatus receive" onclick="receive(this)">接受</span></div>
                    </div>
                </li>
                <li class="mui-table-view-cell mui-media aui-border-b">
                        <div class="mui-slider-right mui-disabled">
                            <a class="mui-btn mui-btn-red">删除</a>
                        </div>
                    <div class="mui-slider-handle">
                        <img class="aui-img-object aui-pull-left" src="../../image/shili.jpg">
                        <div class="aui-img-body">
                            <div class="comName aui-ellipsis-1">图文列表文字介绍内容可以为一行也可以</div>
                            <p class="aui-ellipsis-1 addInfo">图文列表缩略图在左边的样式，默认大小为80PX，文字介绍内容可以为一行也可以为两行，超出部分自动省略</p>
                        </div>
                        <div class="status aui-pull-right"><span class="spanStatus receive" onclick="receive(this)">接受</span></div>
                    </div>
                </li>
                <li class="mui-table-view-cell mui-media aui-border-b">
                        <div class="mui-slider-right mui-disabled">
                            <a class="mui-btn mui-btn-red">删除</a>
                        </div>
                    <div class="mui-slider-handle">
                        <img class="aui-img-object aui-pull-left" src="../../image/shili.jpg">
                        <div class="aui-img-body">
                            <div class="comName aui-ellipsis-1">图文列表文字介绍内容可以为一行也可以</div>
                            <p class="aui-ellipsis-1 addInfo">图文列表缩略图在左边的样式，默认大小为80PX，文字介绍内容可以为一行也可以为两行，超出部分自动省略</p>
                        </div>
                        <div class="status aui-pull-right"><span class="spanStatus receive" onclick="receive(this)">接受</span></div>
                    </div>
                </li>
                <li class="mui-table-view-cell mui-media aui-border-b">
                        <div class="mui-slider-right mui-disabled">
                            <a class="mui-btn mui-btn-red">删除</a>
                        </div>
                    <div class="mui-slider-handle">
                        <img class="aui-img-object aui-pull-left" src="../../image/shili.jpg">
                        <div class="aui-img-body">
                            <div class="comName aui-ellipsis-1">图文列表文字介绍内容可以为一行也可以</div>
                            <p class="aui-ellipsis-1 addInfo">图文列表缩略图在左边的样式，默认大小为80PX，文字介绍内容可以为一行也可以为两行，超出部分自动省略</p>
                        </div>
                        <div class="status aui-pull-right"><span class="spanStatus receive" onclick="receive(this)">接受</span></div>
                    </div>
                </li>
                <li class="mui-table-view-cell mui-media aui-border-b">
                        <div class="mui-slider-right mui-disabled">
                            <a class="mui-btn mui-btn-red">删除</a>
                        </div>
                    <div class="mui-slider-handle">
                        <img class="aui-img-object aui-pull-left" src="../../image/shili.jpg">
                        <div class="aui-img-body">
                            <div class="comName aui-ellipsis-1">图文列表文字介绍内容可以为一行也可以</div>
                            <p class="aui-ellipsis-1 addInfo">图文列表缩略图在左边的样式，默认大小为80PX，文字介绍内容可以为一行也可以为两行，超出部分自动省略</p>
                        </div>
                        <div class="status aui-pull-right"><span class="spanStatus receive" onclick="receive(this)">接受</span></div>
                    </div>
                </li>
                <li class="mui-table-view-cell mui-media aui-border-b">
                        <div class="mui-slider-right mui-disabled">
                            <a class="mui-btn mui-btn-red">删除</a>
                        </div>
                    <div class="mui-slider-handle">
                        <img class="aui-img-object aui-pull-left" src="../../image/shili.jpg">
                        <div class="aui-img-body">
                            <div class="comName aui-ellipsis-1">图文列表文字介绍内容可以为一行也可以</div>
                            <p class="aui-ellipsis-1 addInfo">图文列表缩略图在左边的样式，默认大小为80PX，文字介绍内容可以为一行也可以为两行，超出部分自动省略</p>
                        </div>
                        <div class="status aui-pull-right"><span class="spanStatus receive" onclick="receive(this)">接受</span></div>
                    </div>
                </li>
            </ul>
            <!-- 搜索的结果 -->
            <ul class=" mui-table-view searchResult">
                <li class="mui-table-view-cell mui-media aui-border-b">
                        <div class="mui-slider-right mui-disabled">
                            <a class="mui-btn mui-btn-red">删除</a>
                        </div>
                    <div class="mui-slider-handle">
                        <img class="aui-img-object aui-pull-left" src="../../image/shili.jpg">
                        <div class="aui-img-body">
                            <div class="comName aui-ellipsis-1">图文列表文字介绍内容可以为一行也可以</div>
                            <p class="aui-ellipsis-1 addInfo">图文列表缩略图在左边的样式，默认大小为80PX，文字介绍内容可以为一行也可以为两行，超出部分自动省略</p>
                        </div>
                        <div class="status aui-pull-right"><span class="spanStatus receive" onclick="receive(this)">添加</span></div>
                    </div>
                </li>
                <li class="mui-table-view-cell mui-media aui-border-b">
                        <div class="mui-slider-right mui-disabled">
                            <a class="mui-btn mui-btn-red">删除</a>
                        </div>
                    <div class="mui-slider-handle">
                        <img class="aui-img-object aui-pull-left" src="../../image/shili.jpg">
                        <div class="aui-img-body">
                            <div class="comName aui-ellipsis-1">图文列表文字介绍内容可以为一行也可以</div>
                            <p class="aui-ellipsis-1 addInfo">图文列表缩略图在左边的样式，默认大小为80PX，文字介绍内容可以为一行也可以为两行，超出部分自动省略</p>
                        </div>
                        <div class="status aui-pull-right"><span class="spanStatus receive" onclick="receive(this)">添加</span></div>
                    </div>
                </li>
            </ul>
        </div>
        <footer class="aui-nav">
            <div class=" searchBtn">
                <div class="myBtn cancel" tapmode onclick="cancel()">取消</div>
                <div class="myBtn confirm" tapmode onclick="search()">搜索</div>
            </div>
            <div class="myBtn back" tapmode onclick="back()">返回</div>
        </footer>
    </body>
    <script type="text/javascript" src="../../script/api.js"></script>
    <script type="text/javascript" src="../../script/common.js"></script>
    <script type="text/javascript" src="../../script/jquery-1.11.3.js"></script>
    <script type="text/javascript" src="../../script/mui.js"></script> 
    <script type="text/javascript">
        var UIInput,inputId,inputValue;
        apiready = function() {
            api.parseTapmode();
            var mobile = api.pageParam.mobile;
            var header = $api.dom('header');
            UIInput = api.require('UIInput');
            //$api.fixStatusBar(header);
            api.setStatusBarStyle({
                  style : 'light'
            });
        }
        function searchNewFriend(){
            UIInput.open({
                rect: {
                    x: 0,
                    y: 0,
                    w: api.winWidth,
                    h: 40
                },
                styles: {
                    bgColor: '#fff',
                    size: 14,
                    color: '#000',
                    placeholder: {
                        color: '#ccc'
                    }
                },
                autoFocus: true,
                maxRows: 1,
                placeholder: "商家名称",
                keyboardType: 'search',
                fixedOn: api.frameName
            }, function(ret, err) {
                if (ret) {
                    inputId=ret.id;
                } else {
                    
                }
            });
        }

        // mui遮罩
        var mask = mui.createMask(hidePicker);
        // 显示遮罩
        function showPicker(type){
            mask.show();
             // $(".pickerToTop").addClass("toTopAnimate");
             //t弹出UIInput
             $("footer").css({"display":"block"});
            searchNewFriend();
        }
        // 关闭遮罩
        function hidePicker(){
            // $(".pickerToTop").removeClass("toTopAnimate");
             $("footer").css({"display":"none"});
            mask.myclose();
            UIInput.hide({
                id:inputId
            });
            UIInput.closeKeyboard({
                id:inputId
            });
        }
        function cancel(){
            hidePicker();
        }
        function search(){
            //获取输入框的值
            //back
            UIInput.value({
                id:inputId
            },function(ret, err) {
                if (ret) {
                    if(ret["msg"]){
                        alert(ret["msg"]);
                        $(".searchResult").css({"display":"block"});
                        $(".friendList").css({"display":"none"});
                        $(".searchBtn").css({"display":"none"});
                        $(".back").css({"display":"block"});
                        hidePicker();
                        //为了显示返回按钮
                        $("footer").css({"display":"block"});
                    }else{
                        api.toast({
                          msg:"请输入",
                          duration:2000
                        })
                    }
                } 
            });
        }
        function back(){
            $(".searchResult").css({"display":"none"});
            $(".friendList").css({"display":"block"});
            $(".searchBtn").css({"display":"block"});
            $(".back").css({"display":"none"});
            $("footer").css({"display":"none"});
        }
        //单击接受按钮
        function receive(obj) {
            mui.confirm("确定要加为好友？","ddd",["是","否"],function (e) {
                if(e.index==0){
                    $(obj).removeClass("receive");
                    $(obj).text("已添加");
                    $(obj).removeAttr("onclick");
                    api.toast({
                        msg:"已添加好友"
                    })
                }
            })

//            api.confirm({
//                title: 'testtitle',
//                msg: 'testmsg',
//                buttons: ['确定', '取消']
//            }, function(ret, err) {
//                var index = ret.buttonIndex;
//            });
        }
    </script>
</html>
